<!-- 广告位 -->
<template>
  <div class="container mx-auto px-4 py-6">
    <div class="grid grid-cols-3 gap-6">
      <div
        v-for="(shop, index) in shops"
        :key="index"
        class="bg-white rounded-lg shadow-sm overflow-hidden"
      >
        <div class="relative h-48">
          <a :href="`/shopHome/${shop.id}`" target="_blank">
            <img
              :src="shop.image"
              :alt="shop.name"
              class="w-full h-full object-cover"
            />
          </a>
        </div>
        <!-- <div class="p-4">
            <h3 class="text-lg font-medium">{{ shop.name }}</h3>
            <p class="text-gray-500 mt-2">电话: {{ shop.phone }}</p>
            <p class="text-gray-500">QQ: {{ shop.qq }}</p>
          </div> -->
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import loadLocalJson from "@/https/local/localJson";
//广告位的数据
const shops = ref();
onMounted(async () => {
  await loadLocalJson("json/home/ad.json").then((res) => {
    shops.value = res.data;
    // console.log(shops.value);
  });
});
</script>
<style lang="less" scoped></style>
